import React, { createRef } from "react";

import ModelDate from "./components/ModelDate"
import styles from "./index.module.css"

export default class MyDate extends React.Component {
    state = {
        showBool: false,
        dateValue: '请选择日期'
    }
    // 选择选择日期 打开日期选择器
    choiceDate = () => {
        this.setState({
            showBool: true
        })
    }
    // 根据日期组件传递的日期渲染到input上
    getDateHandle = (dateValue) => {
        this.setState({
            dateValue
        }, () => {
            this.setState({
                showBool: false
            })
        })
    }
    render() {
        const { showBool, dateValue } = this.state
        return (
            <>
                <div className={styles['date-wrap']} onClick={this.choiceDate}>
                    <input type="text" value={dateValue} placeholder="请选择日期" className={styles['date-input']} />
                    <img className={styles['date-img']} src="https://img.51miz.com/Element/00/81/87/06/7eaced6a_E818706_40ec99d8.png" />
                    <div className={styles['date-show']}>
                        <ModelDate showBool={showBool} getDateHandle={this.getDateHandle} />
                    </div>
                </div>
            </>
        )
    }
}